<script lang="ts" setup>
import {get, post} from '../utils/axios-request'
import {onMounted, reactive, ref} from 'vue';
import {ElMessageBox} from "element-plus";
import {useGlobalConstants} from '../stores/global-constants'
import {SwitchButton} from "@element-plus/icons-vue";

/**
 * 分页
 */
const loading = ref(false);
const artworkList = ref([]);
const pages = ref(1);
const currentPage = ref(1);
const total = ref(0);

const paginate = async (): Promise<void> => {
  loading.value = true;
  post('/pdf/artwork/paginate', param, (page) => {
    artworkList.value = page.list;
    pages.value = page.pages;
    total.value = page.total;
    loading.value = false;
  }, () => {
    loading.value = false;
  })
};
const onCurrentChange = (page: number) => {
  currentPage.value = page;
  param.pageNum = page;
  paginate()
}

const onPageSizeChange = (size: number) => {
  param.pageSize = size;
  param.pageNum = 1;
  paginate()
}
/**
 * 检索条件
 */
const types = ref([]);
const pricePeriods = ref([]);
const param = reactive({
  pageSize: 10,
  pageNum: 1,
  text: null,
  type: null,
  sellStatus: null,
  pricePeriod: null
})

const getSelectors = async (): Promise<void> => {

  get('/public/data/selectors/ARTWORK_TYPE', (res) => {
    types.value = res;
  })
  get('/public/data/selectors/PRICE_PERIOD', (res) => {
    pricePeriods.value = res;
  })

}

const onChangeTypes = (type: number) => {
  param.type = type;
  paginate();
}

const onChangePricePeriods = (pricePeriod: number) => {
  param.pricePeriod = pricePeriod;
  paginate();
}

const onChangeCellStatus = (cellStatus: number) => {
  param.sellStatus = cellStatus;
  paginate();
}
/**
 * 作品图展示
 */

const srcList = ref([]);

const showPreview = ref(false);

const previewImage = (id: string) => {
  showPreview.value = true;
  get('/pdf/get/image/' + id, (res) => {
    srcList.value[0] = res;
  })
}

const closePreviewImage = () => {
  showPreview.value = false;
  srcList.value = []
}

/**
 * 删除作品
 * @param id
 * @param name
 */
const deleteArtwork = (id: string, name: string) => {
  ElMessageBox.alert('确认删除该作品吗？', name, {
    confirmButtonText: '确认'
  }).then(() => {
    get('/pdf/delete/artwork/' + id, () => {
      paginate();
    })
  });
}
/**
 * 修改售卖状态
 */

const updateSellStatus = (id: string, sellStatus: boolean) => {

  post('/pdf/update/artwork/sell/status', {id: id, sellStatus: sellStatus})
}

/**
 * 挂在钩子：挂在到DOM之后的事件
 */
onMounted(() => {
  paginate();
  getSelectors();
})
</script>

<template>
  <div class="search-container">
    <el-row>
      <el-col :span="6">
        <el-input @keyup.enter="paginate" placeholder="作品名称 / 艺术家名称" v-model="param.text"/>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="paginate">查询</el-button>
      </el-col>
      <el-col :span="3">
        <el-select clearable class="search-select" v-model="param.type" @change="onChangeTypes" placeholder="类型">
          <el-option v-for="option in types" :label="option.label" :value="option.value"/>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select clearable class="search-select" v-model="param.pricePeriod" @change="onChangePricePeriods"
                   placeholder="价格范围">
          <el-option v-for="option in pricePeriods" :label="option.label" :value="option.value"/>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select clearable class="search-select" v-model="param.sellStatus" @change="onChangeCellStatus"
                   placeholder="售卖状态">
          <el-option label="已售" :value="true"/>
          <el-option label="未售" :value="false"/>
        </el-select>
      </el-col>
    </el-row>
  </div>
  <el-image-viewer
      v-if="showPreview"
      :url-list="srcList"
      show-progress
      :initial-index="0"
      @close="closePreviewImage"
  />
  <el-table
      :data="artworkList"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="数据加载中..."
      :element-loading-spinner="useGlobalConstants().TABLE_LOADING_SVG"
      element-loading-svg-view-box="-10, -10, 50, 50"
      border
      empty-text="暂无作品"
      row-key="id"
  >
    <el-table-column fixed type="expand">
      <template #default="props">
        <el-table :data="props.row.details" :border="true">
          <el-table-column label="版数" prop="editions"/>
          <el-table-column prop="length"
                           :label="props.row.type == 4 || props.row.type == 7  ? '高（cm）' : props.row.type == 6 ? '时' : '长（cm）'"/>
          <el-table-column prop="width"
                           :label="props.row.type == 4 || props.row.type == 7  ? '宽（cm）': props.row.type == 6 ?  '分'  : '宽（cm）'"/>
          <el-table-column prop="height"
                           :label="props.row.type == 4 || props.row.type == 7  ? '深（cm）' : props.row.type == 6 ? '秒' : '高（cm）'"/>
          <el-table-column label="备注/说明" prop="remarks"/>
          <el-table-column label="上传时间" prop="createTime"/>
          <el-table-column label="上传人" prop="creator"/>
          <!--          <el-table-column label="审核状态" prop="auditStatusName"/>-->
          <!--          <el-table-column label="审核时间" prop="auditTime"/>-->
          <!--          <el-table-column label="审核备注" prop="auditDesc"/>-->
        </el-table>
      </template>
    </el-table-column>
    <el-table-column fixed label="作品名称" show-overflow-tooltip prop="name"/>
    <el-table-column fixed label="艺术家" show-overflow-tooltip prop="author"/>
    <el-table-column label="尺寸" prop="sizeName" align="center"/>
    <el-table-column label="材质" show-overflow-tooltip prop="material"/>
    <el-table-column label="年份" prop="year" align="center"/>
    <el-table-column label="类型" prop="typeName" align="center"/>
    <el-table-column label="价格" prop="price" align="center"/>
    <el-table-column label="售卖状态" prop="sellStatusName" width="120">
      <template #default="scope">
        <el-switch
            v-model="scope.row.sellStatus"
            class="ml-2"
            inline-prompt
            active-text="已售"
            inactive-text="未售"
            size="large"
            width="70"
            @change="updateSellStatus(scope.row.id, scope.row.sellStatus)"
        />
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" align="center">
      <template #default="scope">
        <div class="demo-image__preview">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.thumbnail"
              fit="cover"
              lazy
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              show-progress
              :initial-index="0"
              @click="previewImage(scope.row.id)"
          />
        </div>
        <!--        <el-button link type="primary" size="small" disabled>编辑</el-button>-->
        <el-button link type="primary" size="small" @click="deleteArtwork(scope.row.id, scope.row.name)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page-container">
    <el-pagination
        size="default"
        background
        :page-sizes="[10, 20, 50]"
        layout="sizes, prev, pager, next, total"
        :total="total"
        :current-page="currentPage"
        @current-change="onCurrentChange"
        @size-change="onPageSizeChange"
        class="mt-4"
    />
  </div>
</template>

<style scoped>

.page-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（可选） */
  margin-top: 5vh;
}

.search-container {
  margin-bottom: 3vh;
}

.search-select {
  width: 90%;
}
</style>